
·
<template>
  <open-modal class="c-pz10000 modal-class" :openModal="showCombo" @closeModal="closeCombo">
    <div class="c-bg-white c-pt36 c-pb32 c-ph24 c-br-tr16 c-br-tl16 c-p">
      <div class="c-pa c-p-t0 c-p-r16 c-hh76 c-fc-sgray c-flex-row c-flex-center c-fs24">
        <i class="iconfont show c-fs28 c-mr10" @click="closeCombo">&#xe8fd;</i>
      </div>
      <div class="c-fs28 c-fc-xblack c-textAlign-c c-fw600 c-mb40">{{tittle}}</div>
      <div class="c-fs24 c-fc-gray c-mb40">{{minTittle}}</div>
      <div class="c-maxh660 c-maxh560 c-content-scroll">
        <template v-if="packageList.length > 0">
          <div>
            <div class="c-flex-row c-mb40" @click="clickProduct(item)" v-for="(item, index) in packageList" :key="index">
              <div class="c-ww180 c-hh120 c-text-hidden c-p c-br8">
                <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.cover, require('../../../assets/defult270.png'))" />
                <img v-if="item.payType == 2 && item.svipDiscount == 0 && item.vipDiscount != 0" src="@/assets/i/wap/course/svipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
                <img v-else-if="item.payType == 2 && item.vipDiscount == 0" src="@/assets/i/wap/course/vipfree5.png" alt="" class="c-pa c-p-t0 c-p-l0 c-ww60 c-pz1" />
                <!-- type：1知识套餐 2专栏；3=测评；4=训练营；5=课程1.图文，2.音频，3.视频 -->
                <div class="c-fs16 c-fc-white c-ph6 c-pv2 c-translucent-balck60 c-br20 c-pa c-p-r8 c-p-b8">
                  {{item.type==1?'知识套餐':item.type==2?'专栏':item.type==3?'测评':item.type==4?'训练营':item.type==5?(item.courseType==2?'图文':item.courseType==1?'音频':'视频'):''}}
                </div>
              </div>
              <div class="c-flex-column c-pl20 c-flex-grow1 c-w0 c-justify-sb">
                <div class="c-fs24 c-text-ellipsis2 c-fc-xblack">{{ item.name }}</div>
                <div class="c-flex-row c-aligni-center c-justify-sb">
                  <span v-if="item.isSaleOnly != 1 && item.isSaleTogether == 1" class="theme-fc c-fs26">关联售卖</span>
                  <div v-else class="theme-fc c-fs26">
                    <span v-if="item.price && item.payType == 2" class="c-fs20">{{ '￥' | iosPriceFilter(item.optimal) }}</span>
                    <span>{{ item.payType | priceValueFilter(item.price, 61, item.optimal) }}</span>
                  </div>
                  <div class="c-fs20 c-fc-gray" v-if="item.type==4" v-show="item.type==4 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(78))))">{{ item.sales }}人报名</div>
                  <template v-else-if="item.price && item.payType == 2">
                    <div class="c-fs20 c-fc-gray" v-if="(item.type==1 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(61))))) ||
                      (item.type==2 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(9))))) ||
                      item.type==4 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(78))))||
                      (item.type==5 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(5)))))"
                    >{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
                    <div class="c-fs20 c-fc-gray" v-if="item.type!=1 && item.type!=2 && item.type!=5" >{{ item.sales | formatNumber }}人已{{ $isWxAppIos() ? '观看' : '购买' }}</div>
                  </template>
                  <template v-else>
                    <div class="c-fs20 c-fc-gray" v-if="item.type==1||item.type==2||item.type==5" v-show="(item.type==1 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(61))))) ||
                      (item.type==2 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(9))))) ||
                      (item.type==5 && (enableShowModuleView == 1 || (enableShowModuleView == 0&&!(enableHiddenModules && enableHiddenModules.includes(5)))))"
                    >{{ (item.visits ? item.visits : item.clicks) | formatNumber }}人观看</div>
                    <div class="c-fs20 c-fc-gray" v-if="item.type!=1 && item.type!=2 && item.type!=5" >{{ (item.visits ? item.visits : item.clicks) | formatNumber }}人观看</div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </open-modal>
</template>
<script>
import OpenModal from '@/components/templates/common/openModal.vue';
export default {
  name: 'RelatedCombo',
  components: {
    OpenModal,
  },
  props: {
    tittle:{
      type:String,
      default:''
    },
    minTittle:{
      type:String,
      default:''
    },
    showCombo: {
      type: Boolean,
      default: false
    },
    packageList:{
      type: Array,
      default: () => []
    }
  },
  watch: {
  },
  data() {
    return {
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  methods: {
    closeCombo() {
      this.$emit('closeCombo');
    },
    clickProduct(item) {
      // <!-- type：1知识套餐 2专栏；3=测评；4=训练营；5=课程1.图文，2.音频，3.视频 -->
      let distribution = this.distributionId ? `&distribution=1` : '';
      let toPath = '';
      this.closeCombo()
      if (item.type == 1) {
        toPath = `/homePage/package/packageDetail?combosId=${item.cId}${distribution}`;
      } else if (item.type == 2) {
        toPath = `/homePage/column/columnDetail?cId=-1&ckFrom=${global.ckFrom.column}&extId=${item.columnId}${distribution}`;
      } else if (item.type == 3) {
        toPath = `/homePage/examination/examinationDetail?ExaminationNo=${item.id}`;
      } else if (item.type == 4) {
        toPath = `/homePage/camp/campDetail?campId=${item.id}`;
      } else if (item.type == 5) {
        if (item.courseType == 2) {
          toPath = `/homePage/course/imgText?courseId=${item.id}&extId=-1&ckFrom=5`
        } else if (item.courseType == 1) {
          toPath = `/homePage/course/voice?courseId=${item.id}&extId=-1&ckFrom=5`
        } else if (item.courseType == 0) {
          toPath = `/homePage/course/video?courseId=${item.id}&extId=-1&ckFrom=5`
        }
      }
      console.log(toPath)
      this.$routerGo(this, 'push', { path: toPath });
    },
  },
  activated() {}
};
</script>

<style scoped>
.modal-class {
  position: fixed !important;
  z-index: 100000 !important;
}
</style>
